<template>
	<view class="h100v">
		<custom-swiper @changePage="changePage" ref="swiper" :list="tabs" :bold="true">
			<template v-for="(item, index) of tabs" :slot="'swiper-item-' + (index + 1)" class="h100">
				<table-list :areaId="item.id" :updataId="updataId" :key='item.id' />
			</template>
		</custom-swiper>
	</view>
</template>

<script>
	import CustomSwiper from '@/components/custom-tabs-page-linkge/tab-page-linkage.vue';
	import TableList from "./components/TableList"
	export default {
		components: {
			CustomSwiper,
			TableList
		},
		data(){
			return{
				tabs: [],
				updataId:'',
				oldIndex:0
			}
		},
		created() {
			this.getArea()
		},
		onShow() {
			uni.$emit(`tableListRefresh${this.updataId}`)
		},
		methods:{
			async getArea(){
				// this.tabs = []
				try{
					let {data} = await this.util.request({
						'url': this.api.getArea,
					})
					this.tabs = data
					this.updataId = this.tabs[0].id
				}catch(e){
					this.util.message(e.msg, 3)
				}
			},
			changePage(index){
				this.oldIndex = index
				this.updataId = this.tabs[index].id
			}
		}
	}
</script>

<style scoped lang="scss">
	.tables{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		.table{
			width: 220rpx;
			height: 250rpx;
			margin-right: 25rpx;
		}
		.table:nth-child(3n+3){
			margin-right: 0rpx;
		}
	}
	
</style>
